import React, {Component,} from 'react'
import {connect,} from 'react-redux'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import {WhiteSpace, WingBlank} from "antd-mobile";
import BgNewsCard from "../../shared-components/BgNewsCard/BgNewsCard";
import NewsCard from "../../shared-components/NewsCard/NewsCard";
import ImageCarousel from "../home/components/Recommend/components/ImageCarousel/ImageCarousel";


class NewsListContainer extends Component {

    constructor(props) {
        super(props)
        this.newsRef = React.createRef()
        this.fetchLength = 7
        this.fetchEndPoint = 700
        this.state = {
            touched: false,
            startId: this.props.newsList.length,
            // startId: 0,
            endId: this.props.newsList.length + this.fetchLength
            // endId: 14,
        }
    }

    componentDidMount() {

        if (this.props.newsList.length === 0) {
            this.props.doFetchNewsList({
                startId: this.state.startId,
                endId: this.state.endId,
            })
        }
    }

    onToucheStart = (e) => {
        this.setState({
            touched: true,
        })
    }

    onTouchEnd = (e, ref) => {

        const curLastNewsDiv = ref.current.lastElementChild
        const rect = curLastNewsDiv.getBoundingClientRect()
        const top = rect.top
        const newStartId = this.props.newsList.length
        const newEndId = newStartId + this.fetchLength
        if (top < this.fetchEndPoint) {

            if (newEndId > 50) {

                this.setState({
                    startId: newStartId,
                    endId: newEndId,
                })
            } else {
                // const newStartId = this.state.endId
                // const newEndId = this.state.endId + this.fetchLength
                this.props.doFetchNewsList({
                    startId: newStartId,
                    endId: newEndId,
                })
                this.setState({
                    startId: newStartId,
                    endId: newEndId,
                })
            }

        }
        this.setState({
            touched: false,
        })
        // setTouched(false)
        // console.log(e)
        // console.log(e.target)

    }


    render() {
        const {history, newsList} = this.props

        const newsTemplate = newsList.slice(3).map((n, i) => {
            if (i === 0 || (i + 1) % 4 !== 0) {
                return (
                    <div key={i} onClick={() => history.push(`./news/${n.id}`)}>
                        {/*<WhiteSpace/>*/}
                        <NewsCard  news={n}/>
                    </div>
                )
            } else {
                return (
                    <div key={i} onClick={() => history.push(`./news/${n.id}`)}>
                        {/*<WhiteSpace size='xl'/>*/}
                        <BgNewsCard news={n}/>
                    </div>
                )
            }
        })
        const endId = this.state.endId
        const touched = this.state.touched

        return <GoBackLayout
            title="新闻资讯"
            history={this.props.history}
        >
            {/*<WingBlank>*/}
            <ImageCarousel />
            <div
                ref={this.newsRef}
                onTouchStart={(e) => this.onToucheStart(e)}
                onTouchEnd={(e) => this.onTouchEnd(e, this.newsRef)}
            >
                {newsTemplate}
            </div>
            {endId <= 50 && !touched ? <div style={{textAlign: 'center', padding: '25px 0',}}>滑动加载更多精彩内容</div> : null}
            {endId <= 50 && touched ? <div style={{textAlign: 'center', padding: '25px 0',}}>松开即可加载更多</div> : null}
            {endId > 50 ? <div style={{textAlign: 'center', padding: '25px 0',}}>已经没有新闻了~</div> : null}
            {/*</WingBlank>*/}
        </GoBackLayout>
    }

}

const mapState = state => ({
    newsList: state.news.newsList,
})

const mapDispatch = dispatch => ({
    doFetchNewsList: (payload) => dispatch.news.doFetchNewsList(payload),
})

export default connect(mapState, mapDispatch)(NewsListContainer)
